<template>
  <transition name="slide">
    <div class="health-detial-container">

      <div class="health-detail-header" ref="header">
        <div class="health-title-container">
          <div class="health-title">{{healthDetail.name}}</div>
          <!-- <div class="health-detail">{{healthDetail.synopsis}}</div> -->
        </div>
        <div class="health-detail-list-control-container">
          <div class="detail-list-tab">
            <span class="tab-text" v-bind:class="{active: titleToggle}" @click="toXiangMu">体检项目</span>
          </div>
          <div class="detail-list-tab">
            <span class="tab-text" v-bind:class="{active: !titleToggle}" @click="toXuzhi">体检须知</span>
          </div>
        </div>
      </div>

      <div class="health-detail-body" ref="scroll">
        <div class="wrapper" ref="slideGroup">

          <div class="health-test-name" ref="xiangmu">体检项目</div>
          <ul class="health-test-list" ref="xiangmulist">
            <li class="health-test-item" v-for="item in healthDetail.item_list" :key="item.id">
              <div class="health-test-title">{{item.name}}</div>
              <div class="health-test-content">{{item.detail}}</div>
            </li>
          </ul>

          <div class="health-test-name" ref="xuzhi">体检须知</div>
          <div class="health-test-tip" v-html="healthDetail.guide" @load.capture="load"></div>
        </div>
      </div>

      <div class="health-detail-footer">
        <span class="health-price">¥{{healthDetail.price}}</span>
        <span class="health-buynow" @click="toInput">立即预约</span>
      </div>
      <router-view></router-view>
    </div>
  </transition>
</template>

<script>
import BScroll from 'better-scroll'
import { getHealthDetail } from 'api/main'

export default {
  name: 'HelloWorld',
  data() {
    return {
      healthDetail: {},
      healthId: Number,
      scrollY: Number,
      titleToggle: 1
    }
  },
  created() {
    this.healthId = this.$route.params.id
    this._getHealthDetail(this.healthId)
  },
  mounted() {
    this.$nextTick(() => {
      this.scroll = new BScroll(this.$refs.scroll, {
        probeType: 3,
        click: this.click
      })
      this.scroll.on('scroll', (pos) => {
        this.scrollY = pos.y;
        // if (pos.y > -370)
        //   this.titleToggle = 1
        // if (pos.y < -370)
        //   this.titleToggle = 0
      })
    })


  },
  watch: {
    scrollY: function () {
      let y = parseInt(this.scrollY)
      let height = parseInt(this.$refs.xiangmu.clientHeight) + parseInt(this.$refs.xiangmulist.clientHeight)
      let position = (-1 * height) + 100
      if (y > position) {
        this.titleToggle = 1
      }
      if (y <= position) {
        this.titleToggle = 0
      }
    }
  },
  methods: {
    _getHealthDetail() {
      getHealthDetail(this.healthId).then((res) => {
        this.healthDetail = res
      })
    },
    load() {
      this.scroll.refresh();
    },
    toXiangMu() {
      this.titleToggle = 1
      this.scroll.scrollToElement(this.$refs.xiangmu, 400)
    },
    toXuzhi() {
      this.titleToggle = 0
      this.scroll.scrollToElement(this.$refs.xuzhi, 400)
    },
    toInput() {
      this.$router.push({
        path: `/healthList/${this.healthId}/input`
      })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped scoped lang="stylus" rel="stylesheet/stylus">
  @import "healthListDetail.styl"

  .slide-enter-active,
  .slide-leave-active
    transition all 0.3s
  .slide-enter,
  .slide-leave-to
    transform: translate3D(100%, 0, 0)
</style>
